<template>
    <view>
        {{count}}
		<button @click="increment">increment</button>
		
		<view>store - {{username}}</view> 
		<view>store - {{age}}</view>
		
		<view  v-for="(item,index) in todos">
			<!-- <view>{{item.id}} - {{item.text}} -- {{item.done}}</view> -->
			<view>{{item}}</view>
		</view>
		
		<view>已完成  {{doneTodosCount}}</view>
		<view>已完成：  {{doneCount}}</view>
		
		<view> mutations-> {{num}}</view>
		<button @click="addNum">addNum</button>
		
		 <button @click="add">增加</button>
		 <button @click="addCountAction({amount:10})">addCountAction</button>
		 <button @click="addCount({amount:10})">addCount</button>
		 
    </view>
</template>
<script>
	import store from '@/store/index.js'
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	
    export default {
        // state 数据源
        data() {
            return {
                count: 0,
				firstName: 'wang'
            }
        },
        // actions 控制状态变化
        methods: {
            increment() {
                this.count++
            },
			addNum(){
				// store.commit('add')
				// store.commit('add',5)
				// store.commit('add',{amount:10})
				
				// store.commit({ //整个对象都作为载荷传给 mutation 函数
				// 	type:'add',
				// 	amount: 6
				// })
				
				// store.dispatch('addCountAction')
				// store.dispatch('addCountAction',{amount:8})

				store.dispatch({
					type:'addCountAction',
					amount: 5
				})
			},
			...mapMutations(['add']),
			...mapActions([
				'addCountAction',
				// 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
			]),
			...mapActions({
				addCount: 'addCountAction',
			})
        },
		// computed:{
		// 	username(){
		// 		// return store.state.username
		// 		return this.$store.state.username
		// 	}
		// }
		
		// eg: mapState 辅助函数 帮助我们生成计算属性
		// computed:mapState({
		// 	username: state=>state.username,
		// 	age: state => state.age,
		// })
		
		// eg: 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
		// computed:mapState([
		// 	'username',
		// 	'age'
		// ])
		// eg:为了能够使用 this 获取组件自己的data数据，必须使用常规函数。
		// computed:{
		// 	...mapState({
		// 		username: function(state){
		// 			return this.firstName + ' ' + state.username
		// 		},
		// 		age: state => state.age
		// 	})
		// }
		// eg: mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。
		computed:{
			...mapState({
				username: state=>state.username,
				age: state => state.age
			}),
			todos(){
				// return store.getters.allTodos
				// return this.$store.getters.allTodos
				return this.$store.getters.getTodoById(2)
			},
			...mapGetters([
				'doneTodos',
				'doneTodosCount'
			]),
			...mapGetters({
				doneCount: 'doneTodosCount'
			}),
			num(){
				return this.$store.state.num
			}
		},
		
    }
</script>
<style>
	
</style>
